﻿<div class="container">
  <!-- Basic -->
  <div class="block-header">
    <h2>Basic Examples</h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header">
          <h2>Default Example <small>You can type anything here...</small></h2>

          <ul class="actions">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle aria-expanded="false">
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Refresh</a>
                </li>
                <li>
                  <a href="">Manage Widgets</a>
                </li>
                <li>
                  <a href="">Widgets Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-header ch-alt">
          <h2>Alternative Example <small>You can type anything here...</small></h2>

          <ul class="actions">
            <li>
              <a href="">
                <i class="zmdi zmdi-refresh-alt"></i>
              </a>
            </li>
            <li>
              <a href="">
                <i class="zmdi zmdi-download"></i>
              </a>
            </li>
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle>
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Change Date Range</a>
                </li>
                <li>
                  <a href="">Change Graph Type</a>
                </li>
                <li>
                  <a href="">Other Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>
  </div>

  <br />
  <br />

  <!-- Colored Headers -->
  <div class="block-header">
    <h2>Custom Colored Headers <small>Please refer 'Colors' page in 'User Interface' for more color classes</small></h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>

  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header bgm-cyan">
          <h2>Cyan <small>You can type anything here...</small></h2>

          <ul class="actions actions-alt">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle aria-expanded="false">
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Refresh</a>
                </li>
                <li>
                  <a href="">Manage Widgets</a>
                </li>
                <li>
                  <a href="">Widgets Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-header bgm-red">
          <h2>Red <small>You can type anything here...</small></h2>

          <ul class="actions actions-alt">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle aria-expanded="false">
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Refresh</a>
                </li>
                <li>
                  <a href="">Manage Widgets</a>
                </li>
                <li>
                  <a href="">Widgets Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-header bgm-orange">
          <h2>Orange <small>You can type anything here...</small></h2>

          <ul class="actions actions-alt">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle aria-expanded="false">
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Refresh</a>
                </li>
                <li>
                  <a href="">Manage Widgets</a>
                </li>
                <li>
                  <a href="">Widgets Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-header bgm-green">
          <h2>Green <small>You can type anything here...</small></h2>

          <ul class="actions actions-alt">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle aria-expanded="false">
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Refresh</a>
                </li>
                <li>
                  <a href="">Manage Widgets</a>
                </li>
                <li>
                  <a href="">Widgets Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-header bgm-purple">
          <h2>Purple <small>You can type anything here...</small></h2>

          <ul class="actions actions-alt">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle aria-expanded="false">
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Refresh</a>
                </li>
                <li>
                  <a href="">Manage Widgets</a>
                </li>
                <li>
                  <a href="">Widgets Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-header bgm-bluegray">
          <h2>Blue Gray <small>You can type anything here...</small></h2>

          <ul class="actions actions-alt">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle aria-expanded="false">
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Refresh</a>
                </li>
                <li>
                  <a href="">Manage Widgets</a>
                </li>
                <li>
                  <a href="">Widgets Settings</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>
  </div>

  <br />
  <br />

  <!-- No Header -->
  <div class="block-header">
    <h2>No Header <small>Please refer 'Colors' page in 'User Interface' for more color classes</small></h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-body card-padding bgm-teal c-white">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-body card-padding bgm-lime c-white">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-body card-padding bgm-pink c-white">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-body card-padding bgm-amber c-white">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-body card-padding bgm-gray c-white">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>
  </div>

  <br />
  <br />

  <!-- Extra -->
  <div class="block-header">
    <h2>Some Material Design Flavour</h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="row">
    <div class="col-sm-4">
      <div class="card">
        <div class="card-header ch-alt m-b-20">
          <h2>Some Title <small>Phasellus condimentum ipsum id auctor</small></h2>
          <ul class="actions">
            <li>
              <a href="">
                <i class="zmdi zmdi-refresh-alt"></i>
              </a>
            </li>
            <li>
              <a href="">
                <i class="zmdi zmdi-download"></i>
              </a>
            </li>
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle>
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Change Date Range</a>
                </li>
                <li>
                  <a href="">Change Graph Type</a>
                </li>
                <li>
                  <a href="">Other Settings</a>
                </li>
              </ul>
            </li>
          </ul>

          <button class="btn bgm-red btn-float waves-effect"><i class="zmdi zmdi-plus"></i></button>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-header bgm-bluegray m-b-20">
          <h2>Some Title <small>Phasellus condimentum ipsum id auctor</small></h2>
          <ul class="actions actions-alt">
            <li class="dropdown" dropdown>
              <a href="" dropdown-toggle>
                <i class="zmdi zmdi-more-vert"></i>
              </a>

              <ul class="dropdown-menu dropdown-menu-right">
                <li>
                  <a href="">Change Date Range</a>
                </li>
                <li>
                  <a href="">Change Graph Type</a>
                </li>
                <li>
                  <a href="">Other Settings</a>
                </li>
              </ul>
            </li>
          </ul>

          <button class="btn bgm-blue btn-float waves-effect"><i class="zmdi zmdi-mail-send"></i></button>
        </div>

        <div class="card-body card-padding">
          Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis.
        </div>
      </div>
    </div>
  </div>

</div>
